<template>
    <div class="update-img"
        v-loading="loading"
        :element-loading-text="'上传中...'+progress"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        <div style="color:#333;">{{videoNema}}</div>
        <div style="float:left" class="img-box " v-if="dataList" >  
            <video  @canplaythrough="myFunction" :src="dataList?imgRoot+dataList:''" controls  accept="video/*"  height="150" width="200">
                您的浏览器不支持 video 标签。
            </video> 
            <i class="clear-icon" @click="clearImg()">×</i>
        </div>
        <div style="float:left" class="img-box float-left add-img text-center"  v-else>
            <label for="videoInput">+</label>
            <input style="opacity:0;" type="file" id="videoInput" @change='addVideo'>
        </div>  
        
    </div>
</template>

<script>
import * as api from './../api/api'
import axios from 'axios';
import {IMG_ROOT,API_ROOT} from './../config'
export default {
    props:{
        videoUrl:{
            default:'',
            type:String
        }
    }, 
    data() {
        return{ 
            imgRoot:IMG_ROOT,
            loading:false,
            progress:'',
            audioLength:'',
            videoNema:'',
            dataList:'',
            client:'',
        }
    }, 
    watch:{
        videoUrl(a,b){
            if(a){
                this.dataList=a;
            }
        }
    },
    methods: {

        myFunction(ele) { 
            let vm = this;
            var hour = parseInt((ele.target.duration)/3600);
            var minute = parseInt((ele.target.duration%3600)/60);
            var second = parseInt(ele.target.duration%60);
            hour = hour < 10 ? ('0' + hour) : hour; 
            minute = minute < 10 ? ('0' + minute) : minute; 
            second = second < 10 ? ('0' + second) : second; 
            vm.audioLength=`${hour}:${minute}:${second}`;
            vm.$emit('change',vm.dataList,vm.audioLength);
        }, 
        clearImg(){
            this.$emit('clear');
            this.videoNema='';
            this.dataList='';
        },
        getRight(){ 
            this.client = new OSS.Wrapper({
                region: 'http://oss-cn-shenzhen.aliyuncs.com',
                secure: true,//https
                endpoint: 'http://oss-cn-shenzhen.aliyuncs.com',
                accessKeyId: 'LTAIBBwXq7f3tVXt',
                /*accessKeyId,accessKeySecret两者到阿里云控制台获得*/
                accessKeySecret:'rvQuhbR719MuPtiHgi9pHEmxjctgUR',
                bucket: 'renqing123' /*装图片的桶名*/
            });
        },
        addVideo(event){ 
            var vm = this;  
            vm.getRight();
            var file = event.target.files[0];  
            let ext=event.target.value.toLowerCase().split('.').splice(-1);
            var storeAs = (new Date()).getTime()+'.'+ext;
            vm.loading=true;
            // 调用上传方法
            vm.client.multipartUpload(storeAs, file, {
                progress: function* (percentage) {
                    let fileloadingNum = Math.ceil(percentage * 100) + '%' 
                    vm.progress = fileloadingNum

                }
            }).then(function (res) {
                vm.loading=false;
                if(res.res.status==200){
                    vm.dataList=res.name;
                    // setTimeout(()=>{
                    //     vm.$emit('change',vm.dataList,vm.audioLength);
                    // },1600);
                    vm.$message({
                        message: '上传成功！',
                        type: 'success'
                    });
                }; 
            }).catch(function (err) {
                vm.loading=false;
                Message({
                    showClose: true,
                    message: '服务器错误！'
                })
            }) 
        },
    }, 
}
</script>

<style lang="scss" scoped>
.update-img{
    display:inline-block;
    margin-left:10px;
    .img-box{
        position:relative;
        display:inline-block;
        height:160px;
        width:160px; 
        color:#DEDEDE;
        margin-right:20px;
        padding:20px;
        box-sizing:border-box;
        .img{
            height:100%;
            width:100%; 
        } 
        .clear-icon{
            position:absolute;
            top:0;
            left:0;
            padding:0 6px;
            font-size:20px;
            border-radius:50%;
            background:#CD4640;
            color:#fff;
        }
    }
    .add-img{ 
        line-height:110px;
        border:1px dotted #DEDEDE;
        label{
            font-size:40px;
            display:inline-block;
            text-align:center;
            width:100%;
            height:100%;
        }
        input{
            position:absolute;
            top:0;
            left:0;
            width:0;
            height:0;
        }
    }
}
</style>
